<!--
 * @Author: N0ts
 * @Date: 2020-12-25 10:39:42
 * @LastEditTime: 2023-04-20 14:35:17
 * @Description: 我的第三个个人主页
 * @FilePath: /NutssssIndex3/index.html
 * @Mail：mail@n0ts.top
-->

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>这里是网站标题</title>
        <meta name="description" content="这里是网站介绍" />
        <meta name="keywords" content="这里是网站关键词" />
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="./css/lovexhj.css" />
    </head>

    <body>
        <div id="lovexhj" v-clock>
            <!-- 侧栏按钮 -->
            <div class="sidebar">
                <!-- 主题切换 -->
                <div @click="clickChangeTheme">
                    <i class="fa fa-moon-o" v-if="lovexhjData.themeSelect == 'white'"></i>
                    <i class="fa fa-sun-o" v-else></i>
                    <span v-if="lovexhjData.themeSelect == 'white'">切换<b class="sidebarDarkText">暗</b>色</span>
                    <span v-else>切换<b class="sidebarWhiteText">亮</b>色</span>
                </div>
            </div>

            <!-- 首页 -->
            <div class="lovexhj1" v-if="lovexhjData" ref="lovexhj1">
                <div class="lovexhj1Box">
                    <div
                        :class="{'sunlightOrMoon': true, 'sun': true, 'sunOrMoonHide': lovexhjData.themeSelect == 'dark'}"
                        ref="sun"
                    ></div>
                    <div
                        :class="{'sunlightOrMoon': true, 'moon': true, 'sunOrMoonHide': lovexhjData.themeSelect == 'white'}"
                        ref="Moon"
                    ></div>
                    <div class="hill1" ref="hill1"></div>
                    <div class="hill2" ref="hill2"></div>
                    <div class="earth" ref="earth">
                        <div class="house" ref="house"></div>
                    </div>
                    <div class="lovexhj1Text">
                        <p>{{ lovexhjData.lovexhj1.title }}</p>
                        <p>{{ lovexhjData.lovexhj1.subTitle }}</p>
                        <ul>
                            <li v-for="(item, index) in lovexhjData.lovexhj1.menu" :key="index">
                                <a :href="item.link" target="_blank">
                                    <i :class="'fa ' + item.icon"></i>
                                    <span>{{ item.name }}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 介绍 -->
            <div class="lovexhj2">
                <!-- 介绍 - 文案 -->
                <div class="lovexhj2TextBox" v-html="lovexhjData.lovexhj2.content"></div>
                <!-- 介绍 - 图片 -->
                <div class="lovexhj2Img" :class="{ lovexhj2ImgAction : meImgShow }" @click="meImgShow = !meImgShow">
                    <img :src="lovexhjData.lovexhj2.img" :alt="lovexhjData.lovexhj2.img" />
                </div>
                <!-- 图片打开时遮罩 -->
                <div
                    class="lovexhj2ImgBg"
                    :class="{ lovexhj2ImgShowBg : meImgShow }"
                    @click="meImgShow = !meImgShow"
                ></div>
            </div>
            <!--  -->
            <div class="lovexhj3">123</div>
        </div>

        <!-- js 引用 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
        <script src="./js/lovexhj.js" type="module"></script>
    </body>
</html>
